<link href="/css/pagination.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
#page textarea { width: 98%; height: 60px; }
span.time {
	font-family: Georgia,'Helvetica Neue', 'Hiragino Sans GB', Helvetica, Arial, Sans-serif;
	color: #555;
	margin-left: 5px;
	font-size: 15px;
	font-weight: normal;
}
</style>
<div id="page">
	<div class="mod-note-button">
		<input type="button" class="btn btn-mini" value="≡ 文档列表" onclick="location.href='/doc/';" />
		<button class="btn btn-mini btn-primary" type="button" onclick="location.href='/memo/';">⊙ 便笺首页</button>
		<button class="btn btn-mini" type="button" onclick="location.href='/feedback/';">≠ 用户反馈</button>
	</div>
	<div class="mod-note-title">
		<h1>快速记录简短的文字：</h1>
	</div>

	<div class="content">
		<div><textarea id="content" maxlength="800" style="background-color:#ECF5FF"></textarea>
		<br/>您还可以输入<u id="limitword">800</u>字 &nbsp;
		<label style="display:inline; display:none; ">
		<input type="checkbox" />
		标记星号</label> &nbsp;
		<input type="button" value="保存" id="btnSave" class="btn btn-primary" />
		</div>
		<% if mobileUser? %>
		<div style="background-color:#DCFFD7; padding:3px;">
		系统检测到您正在使用手机上网，我们建议您使用手机版本，请点击：
		<a href="http://m.ttbiji.com"><u>http://m.ttbiji.com</u></a>
		</div>
		<% end %>

		<h3>我的便笺列表</h3>
		<% @memos.each do |memo| %>
		<div class="item" name="item_<%=memo.id%>">
		<div class="link">
			<span class="time"><%=memo.updated_at.in_time_zone(+8.hours).strftime('%Y-%m-%d %H:%M:%S')%></span>
			<span style="float:right; padding-right:5px;">
				<i class="icon-edit"></i>
				<a href="javascript:void(__edit(<%=memo.id%>));">修改</a> | 
				<i class="icon-trash"></i>
				<a href="javascript:void(__delete(<%=memo.id%>));" onclick="return confirm('确定要删除吗?');">删除</a>
			</span>
		</div>
		<div class="text well"><%=memo.content%></div>
		</div>
		<% end %>

		<p></p>
		<div class='flickr_pagination' style="text-align:center;"><%= will_paginate @memos, :previous_label => '上页', :next_label => '下页' %></div>

	</div>
</div>


<script type="text/javascript">

// 取消修改
function __undo(memoid) {
	$('div[name="item_'+ memoid +'"] .edit').remove();
	$('div[name="item_'+ memoid +'"] .tool').remove();
	$('div[name="item_'+ memoid +'"] .text').show();
	$('div[name="item_'+ memoid +'"] .link').show();
}

// 修改便笺
function __edit(memoid) {
	var arr = [];
	arr.push('<div class="edit"><textarea id="text'+ memoid +'" maxlength="800"></textarea></div>');
	arr.push('<div class="tool">您还可以输入<u id="limitword'+ memoid +'">800</u>字&nbsp;');
	arr.push('<input type="button" value="保存" class="btn btn-mini btn-primary" onclick="__update('+ memoid +');" /> &nbsp;<input type="button" value="取消" class="btn btn-mini" onclick="__undo('+ memoid +');" /><br/>&nbsp;');
	arr.push('</div>');
	$('div[name="item_'+ memoid +'"]').append(arr.join(''));

	// 隐藏
	$('div[name="item_'+ memoid +'"] .text').hide();
	$('div[name="item_'+ memoid +'"] .link').hide();

	// 赋值
	var val = $('div[name="item_'+ memoid +'"] .text').html();
	val = htmlDecode(val);
	$('#text' + memoid).val(val);
	$('#limitword' + memoid).html(800 - val.length);

	// 事件
	$('#text' + memoid).keyup(function(){ getlimitword(memoid); }).blur(function(){ getlimitword(memoid); });
}

// 获取剩余字符数
function getlimitword(memoid) {
	var now = $('#text' + memoid).val().length;
	var limit = 800 - now;
	$('#limitword' + memoid).html(limit);
}

// 保存修改内容
function __update(memoid) {
	var c = $('#text' + memoid).val();
	$.ajax({
		type : 'POST',
		url : '/memo/update',
		data : { content: c, memoid: memoid },
		success: function(d){ __updatecallback(d); }
	});
}

function __updatecallback(memoid) {
	if(memoid == 0) {
		alert('修改失败，请重新尝试。');
	} else {
		var c = $('#text' + memoid).val();
		c = htmlEncode(c);
		$('div[name="item_'+ memoid +'"] .text').html(c);
		$('div[name="item_'+ memoid +'"] > .link > span:first').html('刚刚');
		__undo(memoid);
	}
}

$().ready(function(){

	// 剩余字数
	$('#content').keyup(showlimitword).blur(showlimitword);

	$('#btnSave').click(function(){

		var c = $('#content').val();
		if(c.length == 0) {
			$('#content').focus();
			return;
		}

		$('#btnSave').val('保存中').attr('disabled', 'disabled');
		$.ajax({
			type : 'POST',
			url : '/memo/create',
			data : { content: c },
			success: function(d){ savecallback(d); }
		});
	});

	$.ajaxSetup({  
	    beforeSend: function(xhr) {  
	        xhr.setRequestHeader("X-CSRF-Token", $("meta[name=\"csrf-token\"]").attr("content"));  
	    }  
	});	
});

// 删除便笺
function __delete(memoid) {
	if(memoid > 0) {
		$.ajax({
			type : 'POST',
			url : '/memo/delete',
			data : { 'memoid' : memoid },
			success: function(d){
				if(d == 1) {
					$('div[name="item_'+ memoid +'"]').remove();
				} else {
					alert('删除失败，请重新尝试。');
				}
			}
		});
	}
}

function savecallback(d) {
	if(d != 0) {
		shownew(d);
		$('#content').val('');
		$('#limitword').html('800');
	} else {
		alert('保存失败，请重新尝试。');
	}
	$('#btnSave').val('保存').removeAttr('disabled');
}

// 显示新保存的便笺
function shownew(memoid) {
	var arr = [];
	arr.push('<div class="item" name="item_'+ memoid +'">');
	var s = $('#content').val();
	s = htmlEncode(s);
	arr.push('<div class="link">');
	arr.push('<span class="time">刚刚</span>');
	arr.push('<span style="float:right; padding-right:5px;">');
	arr.push('<i class="icon-edit"></i> <a href="javascript:void(__edit('+ memoid +'));">修改</a> ');
	arr.push('<i class="icon-trash"></i> <a href="javascript:void(__delete('+ memoid +'));" onclick="return confirm(\'确定要删除吗?\');">删除</a>');
	arr.push('</span>');
	arr.push('</div>');
	arr.push('<div class="text well">' + s + '</div>');
	arr.push('</div>');
	$('div.content h3').after(arr.join(''));
}

function showlimitword() {
	var now = $('#content').val().length;
	var limit = 800 - now;
	$('#limitword').html(limit);
}

function htmlEncode(str) {
	var s = "";
	if(str == null || str.length == 0) return '';
	s = str.replace(/\r\n/gi, '<br/>');
	s = str.replace(/\n/gi, '<br/>');
	return s;
}

function htmlDecode(str){
	var s = "";
	if(str == null || str.length == 0) return '';
	s = str.replace(/<br\/>/gi, '\n');
	s = str.replace(/<br>/gi, '\n');
	return s;
}

$().ready(function(){
	$('#main_content div.text').each(function(){
		var s = $(this).html();
		s = htmlEncode(s);
		$(this).html(s);
	});
});

</script>

